---
type: tutorial
title: Создайте переиспользуемый компонент навигации
description: |-
  Руководство: Создайте свой первый блог на Astro —
  Замените элементы, повторяющиеся на нескольких страницах, переиспользуемым компонентом
i18nReady: true
---
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';
import Badge from "~/components/Badge.astro"

Теперь, когда у вас есть одинаковый HTML, написанный на нескольких страницах вашего сайта Astro, пришло время заменить этот повторяющийся контент на переиспользуемый компонент Astro!

<PreCheck>
 - Создать новую папку для компонентов
 - Создать компонент Astro для отображения ваших ссылок навигации
 - Заменить существующий HTML на новый, переиспользуемый компонент навигации
</PreCheck>

## Создайте новую папку `src/components/`

Для хранения файлов `.astro`, которые будут генерировать HTML, но не станут новыми страницами на вашем веб-сайте, вам понадобится новая папка в вашем проекте: `src/components/`.


## Создайте компонент навигации

<Steps>
1. Создайте новый файл: `src/components/Navigation.astro`.

2. Скопируйте ваши ссылки для перехода между страницами из верхней части любой страницы и вставьте их в ваш новый файл `Navigation.astro`:

    ```astro title="src/components/Navigation.astro" "---"
    ---
    ---
    <a href="/">Главная</a>
    <a href="/about/">О сайте</a>
    <a href="/blog/">Блог</a>
    ```
    :::tip
    Если в метаданных вашего файла `.astro` ничего нет, вам не нужно писать разделители кода (`---`). Вы всегда можете добавить их обратно, когда это понадобится.
    :::
</Steps>

### Импортируйте и используйте Navigation.astro

<Steps>
1. Вернитесь к `index.astro` и импортируйте ваш новый компонент внутри разделителей кода:

    ```astro title="src/pages/index.astro"
    ---
    import Navigation from '../components/Navigation.astro';
    import "../styles/global.css";

    const pageTitle = "Главная";
    ---
    ```

2. Затем ниже замените существующие элементы ссылок HTML приведённым кодом, используя новый компонент навигации, который вы только что импортировали:

    ```astro title="src/pages/index.astro" del={1-3} ins={4}
    <a href="/">Главная</a>
    <a href="/about/">О сайте</a>
    <a href="/blog/">Блог</a>
    <Navigation />
    ```

3. Проверьте предварительный просмотр в браузере и обратите внимание, что он должен выглядеть точно так же... и это то, что вам нужно!
</Steps>

Ваш сайт содержит тот же HTML, что и раньше. Но теперь эти три строки кода предоставляются вашим компонентом `<Navigation />`.

<Box icon="puzzle-piece">

## Попробуйте сами — Добавьте навигацию на остальные страницы своего сайта

Импортируйте и используйте компонент `<Navigation />` на других двух страницах вашего сайта (`about.astro` и `blog.astro`) с помощью того же метода.

Не забудьте
- Добавить оператор импорта в верхней части скрипта компонента, внутри разделителей кода.
- Заменить существующий код компонентом навигации.

</Box>

:::note
Когда вы перестраиваете свой код, но не изменяете внешний вид вашей страницы в браузере, это называется **рефакторингом**. Вы будете **рефакторить** несколько раз в этом модуле, когда замените части HTML вашей страницы на компоненты.

Это позволяет вам быстро начать работу с любым рабочим кодом, который часто дублируется в вашем проекте. Затем вы можете постепенно улучшать дизайн существующего кода, не изменяя внешний вид вашего сайта.
:::


<Box icon="check-list">

### Проверьте свои знания

1. Вы можете это сделать, когда элементы повторяются на нескольких страницах:

    <MultipleChoice>
      <Option>
        перезапустить сервер разработки
      </Option>
      <Option isCorrect>
        рефакторинг для многократного использования компонентов
      </Option>
      <Option>
        создать новую страницу
      </Option>
    </MultipleChoice>

2. Компоненты Astro:

    <MultipleChoice>
      <Option>
        могут быть многократно использованы
      </Option>
      <Option>
        фрагменты HTML
      </Option>
      <Option isCorrect>
        оба из вышеперечисленных пунктов!
      </Option>
    </MultipleChoice>

3. Компоненты Astro автоматически создают новую страницу на вашем сайте, когда вы…

    <MultipleChoice>
      <Option>
        вставляете `<html></html>`
      </Option>
      <Option>
        проводите рефакторинг
      </Option>
      <Option isCorrect>
        помещаете файл `.astro` в директорию `src/pages/`
      </Option>
    </MultipleChoice>
</Box>

<Box icon="check-list">

## Контрольный список

<Checklist>
- [ ] Я умею рефакторить содержимое в компоненты многократного использования.
- [ ] Я умею добавлять новый компонент на страницу `.astro`.
</Checklist>

</Box>

### Ресурсы

- [Обзор компонентов Astro](/ru/basics/astro-components/#структура-компонента)

- [Рефакторинг](https://refactoring.com/) <Badge class="neutral-badge" text="внешняя ссылка" />
